<template>
	<view class='content' style="padding-top: 50px;">
		
		<uni-forms err-show-type='toast'  :model="formData" :rules="rules" ref="form" labelWidth="90px">
			<uni-forms-item  style="margin-bottom: 30px;" label="用户名" required name="userName">
				<uni-easyinput type="text" v-model="formData.userName" placeholder="请输入用户名">
				</uni-easyinput>
			</uni-forms-item>
			<uni-forms-item style="margin-bottom: 30px;" label="密码" required name="upwd">
				<uni-easyinput type="password" v-model="formData.upwd" placeholder="请输入密码"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item style="margin-bottom: 30px;"  label="确认密码" required name="upwd2">
				<uni-easyinput type="password" v-model="formData.upwd2" placeholder="请再次输入密码"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item style="margin-bottom: 30px;" label='个性签名' required name='perSign'>
				<uni-easyinput type="text" v-model="formData.perSign" placeholder="您的个性签名"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item style="margin-bottom: 30px;" required label="头像" name="avatar">
				<uni-file-picker @select="select"  limit="1"  :image-styles="imageStyle" v-model="formData.jiatu" fileMediatype="image" />
			</uni-forms-item>
			<button style="margin-bottom: 30px;" type="primary" @click="submit">注册</button>
		</uni-forms>
	</view>
</template>

<script>
	import {userRegister,base} from '../../service/index.js'
	export default {
		data() {
			
			return {
				imageStyle:{
					width:'100px',
					height:'100px',
					border:{
						color:'#007aff',
						width:'2px',
						style:'dashed',
						radius:'2px'
					}
				},
				formData:{
					userName:'',
					upwd:'',
					upwd2:'',
					jiatu:[],
					avatar:'',
					perSign:''
				},
				rules:{
					userName:{
						rules:[
							{
								required:true,
								errorMessage:'姓名不能为空'
							},
							{
								minLength:3,
								maxLength:6,
								errorMessage:'长度在3到6个字符之间'
							}
						]
						
					},
					upwd:{
						rules:[
							{
								required:true,
								errorMessage:'密码不能为空'
							},
							{
								minLength:3,
								maxLength:6,
								errorMessage:'长度在3到6个字符之间'
							}
						]
						
					},
					upwd2:{
						rules:[
							{
								required:true,
								errorMessage:'确认密码不能为空'
							},
							{
								minLength:3,
								maxLength:6,
								errorMessage:'长度在3到6个字符之间'
							},
							{
								validateFunction:(rule,value,data,callback)=>{//这里要改成箭头函数，this.formData才有效果
									//console.log('这个：',this.formData)
									if(value!=this.formData.upwd){
										
										callback('确认密码与密码不一致')
									}
									return true
								}
							}
						]
						
					},
					perSign:{
						rules:[
							{
								required:true,
								errorMessage:'个性签名不能为空'
							}
						]
					},
					avatar:{
						rules:[
							{
								required:true,
								errorMessage:'头像不能为空'
							}
						]
					},
				}
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			select(e){
				//console.log(e)
				uni.uploadFile({
					url:'http://localhost:9000/upload',
					filePath:e.tempFilePaths[0],
					name:'avatar',
					success:(res)=>{
						//console.log(res)
						//console.log(JSON.parse(res.data).filename)
						this.formData.avatar='http://localhost:9000/'+JSON.parse(res.data).filename
						//console.log(this.formData.avatar)
					}
				})
			},
		 submit(form){
				this.$refs.form.validate().then(async res=>{
					//console.log(res)
					//console.log(this.formData.userName)
				let data=await userRegister(this.formData.userName,this.formData.upwd,this.formData.avatar,this.formData.perSign);
					// console.log(data);
					if(data.code==200){
					 await uni.showToast({
							title:'注册成功',
							duration:2000,
							icon:'success'
						})
						setTimeout(()=>{
							uni.switchTab({
								url:'/pages/login/login'
							})
						},2010)
					}
				}).catch(err=>console.log(err))
			}
		}
	}
</script>

<style lang="scss" >
	.content{
		align-items: center;
		uni-forms{
			height: 600px;
		}
	}
	.item{
		margin:20px 0;
	}
	
</style>
